<template>

    <div class="container">
      <div class="userinfo">
        <img :src="userinfo.avatarUrl" alt=""/>
        <button @click="login(2000)" open-type="getUserInfo" lang="zh_CN">
          <!-- :bindgetuserinfo="dologin"  这个东西可以不要  -->
          {{userinfo.nickName}}
        </button>
      </div>
      <!-- 这里不需要了，我设置了一个授权定时的东西，如果失败再另外设置值 -->
      <!--<div class="userinfo" @click="login"> 授权后，点击我获取用户信息登录  </div>-->
      <YearProgress></YearProgress>
      <button v-if='userinfo.openId' @click='scanBook' class='btn'>添加图书</button>
      </div>
</template>
<script>
  import qcloud from 'wafer2-client-sdk'
  import YearProgress from '@/components/YearProgress'
  import {showSuccess, post, showModal} from '@/util'
  import config from '@/config'
  export default {
    components: {
      YearProgress
    },
    data () {
      return {
        userinfo: {
          avatarUrl: '../../../static/img/unlogin.png',
          nickName: '点击登录'
        }
      }
    },
    methods: {
      // 扫码添加数据进入用户的的数据表
      async addBook (isbn) {
        // console.log("---")
        console.log(isbn)
        //  这里是封装的post请求，请看工具类。这是一个Promise异步结果
        const res = await post('/weapp/addbook', {
          isbn,
          openid: this.userinfo.openId
        })
        // res  已经在util里面做过处理了
        // console.log(res);
        // openid是会话秘钥  isbn 图书扫码的结果 显示模态弹窗
        showModal('添加成功', `${res.title}添加成功`)
      },
      //  用户扫码图书
      scanBook () {
        wx.scanCode({
          success: (res) => {
            // 9787547012123   图书扫码，可以进入豆瓣网进行
            // https://book.douban.com/subject_search?search_text=9787547012123&cat=1001
            console.log('扫码结果', res)
            if (res.result) {
              this.addBook(res.result)
            }
          }
        })
      },
      //  用户信息数据请求
      // 登录的具体处理函数
      dologin (e) {
        let this_ = this
        qcloud.setLoginUrl(config.loginUrl)
        const session = qcloud.Session.get()
        let value = {}
        if (session) {
          // 第二次登录
          // 或者本地已经有登录态
          // 可使用本函数更新登录态
          qcloud.loginWithCode({
            success: res => {
              value = {userInfo: res, logged: true, messqge: '登录成功2'}
              console.log({ userInfo: res, logged: true })
              this_.userinfo = res
              wx.setStorageSync('userinfo', res)
              console.log('登录成功2', value)
            },
            fail: err => {
              console.error(err)
              value = {userInfo: err.message, logged: true, messqge: '登录错误2'}
              console.log('登录错误2', err.message)
            }
          })
        } else {
          // 首次登录
          qcloud.login({
            success: res => {
              value = {userInfo: res, logged: true, messqge: '登录成功1'}
              this_.userinfo = res
              wx.setStorageSync('userinfo', res)
              console.log({ userInfo: res, logged: true })
              console.log('登录成功1')
            },
            fail: err => {
              console.error(err)
              value = {userInfo: err.message, logged: true, messqge: '登录错误1'}
              console.log('登录错误1', err.message)
            }
          })
        }
      },
      requestUser () {
        let this_ = this
        qcloud.request({
          url: config.userUrl,
          login: true,
          success (userRes) {
            // 这是util里面的函数，用来界面交互的API，请看文档
            // 显示消息提示框
            showSuccess('登录成功')
            wx.setStorageSync('userinfo', userRes.data.data)
            this_.userinfo = userRes.data.data
          }
        })
      },
      // 用户信息数据获取处理，向后端发起两次请求
      userDataHander () {
        let this_ = this
        wx.getUserInfo({
          success: function (res) {
            console.log(res.userInfo)
            this_.userinfo = res.userInfo
            //  openId是一个用户的会话唯一标识符
            // this_.userinfo.openId="xx";
            //  因为 wx.getUserInfo  获取的数据没有openid,所以需要再次登录从后台重新获取数据
            //   登录
            this_.dologin()
            //   用user用户数据请求接口
            this_.requestUser()
          //   失败应该弹出失败框
          },
          fail: function () {

          }
        })
      },
      // 点击事件登录
      login (e) {
        // 已经授权，可以直接调用 getUserInfo 获取头像昵称
        // 查看是否授权。。这个东西还是要多看文档，要不然绝对GG
        if (this.userinfo.openId) {
          return
        }
        let this_ = this
        setTimeout(function () {
          this_.userinfo.nickName = '...登录中...'
          // 获取用户授权的信息
          // https://developers.weixin.qq.com/minigame/dev/tutorial/open-ability/authorize.html?search-key=wx.getSetting
          wx.getSetting({
            success: function (res) {
              if (res.authSetting['scope.userInfo']) {
                // 已经授权，可以直接调用 getUserInfo 获取头像昵称
                // 会调用内置的获取用户信息接口，然后获取登录和用户信息获取接口(获取openid)
                this_.userDataHander()
              } else if (res.authSetting['scope.userInfo'] === false) {
                // 用户已拒绝授权，再调用相关 API 或者 wx.authorize 会失败，需要引导用户到设置页面打开授权开关
              } else {
                // 未询问过用户授权，调用相关 API 或者 wx.authorize 会弹窗询问用户
              }
            }
          })
        }, e)
      }
    }
  }
</script>
<style lang='scss'>
  .container{
    padding:0 30rpx;

  }
  .userinfo{
    margin-top:100rpx;
    text-align:center;
    img{
      width: 150rpx;
      height:150rpx;
      margin: 20rpx;
      border-radius: 50%;
    }
  }


</style>

